<template>
  <div class="inner">
    <PageTitle title="分拣管理" />
    <div class="ibody">
      <div class="ib-cont">
        <div class="btn-group">
          <!-- <el-date-picker
            v-model="searchDate"
            type="date"
            placeholder="选择日期"
            :shortcuts="shortcuts"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          /> -->
          <whDatePicker @change="dateChange" />
        </div>
        <div class="data-table mt20">
          <el-table
            :data="sortingsData.list"
            style="width: 100%"
            row-class-name="table-normal-row"
            header-row-class-name="table-header-row"
          >
            <el-table-column prop="orderfillSortingNo" label="单号" />
            <el-table-column prop="shippingAddress" label="配送点" />
            <el-table-column prop="orderfillCount" label="包裹数" />
            <el-table-column prop="status" label="分拣状态" width="120" />
            <el-table-column prop="sorter" label="分拣员">
              <template #default="scope">
                {{ scope.row.sorter || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="sortingTime" label="分拣时间" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <div
                  class="wh-btn border-solid"
                  type="primary"
                  @click="startScan(scope.row.orderfillSortingNo)"
                >
                  查看
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              layout="prev, pager, next"
              :total="sortingsData.total"
              @current-change="pageCurrentChange"
            />
          </div>
        </div>
        <div class="scan-logo">
          <el-image :src="fenjianPng" class="fenjian-d" mode="aspectFit" />
          <el-image :src="scanQpng" class="scan-q" mode="aspectFit" />
          <div class="scan-line updownAnmi" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import PageTitle from "@/components/PageTitle.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { getSortingListApi, getSortingOrderDetailApi } from "@/api/sorting";
import { useUserStoreHook } from "@/store/modules/user";
import dayjs from "dayjs";
import { saveStorage, getStorage } from "@/utils/storage";
import { ElMessageBox } from "element-plus";
import { Warning } from "@element-plus/icons-vue";
import fenjianPng from "@/assets/img/fenjian.png";
import scanQpng from "@/assets/img/scanQ2.png";
import whDatePicker from "@/components/whDatePicker.vue";
import { myDialog } from "@/components/myDialog";
// const today = getStorage("fenjian-searchData") || dayjs().format("YYYY-MM-DD");
const today = dayjs().format("YYYY-MM-DD");
const userStore = useUserStoreHook();
const warehouseId = userStore.userInfo.warehouseId;
const router = useRouter();
const searchDate = ref(today);
const shortcuts = [
  {
    text: "今天",
    value: new Date()
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    }
  }
];
// 分页相关数据
const skip = ref(0);
const limit = ref(25);

const sortingsData = ref({
  total: 0,
  list: []
});

// 配送点

async function getSortingList() {
  const queryObj = {
    warehouseId,
    queryDate: searchDate.value,
    skip: skip.value,
    limit: limit.value,
    type: 2
  };
  saveStorage("fenjian-searchData", searchDate.value);
  try {
    sortingsData.value = await getSortingListApi(queryObj);
  } catch (error) {
    // ElMessageBox.alert("服务中止，请稍后重试", "提示", {
    //   type: "warning",
    //   icon: Warning
    // });
    myDialog.warning({
      message: "服务中止，请稍后重试！"
    });
  }
}

// 开始扫码
async function startScan(sortingNo) {
  // 查询状态
  const res = await getSortingOrderDetailApi(sortingNo);
  if (res.picked === 0) {
    // 未完成拣货
    myDialog.warning({
      message: "该汇总单处于待拣货状态，请到拣货管理完成后继续分拣本单",
      confirmTxt: "确定"
    });
  } else {
    router.push({ path: "/fenjian/fjCheck", query: { sortingNo: sortingNo } });
  }
}

function pageCurrentChange(val) {
  skip.value = limit.value * val - 1;
  getSortingList();
}

function dateChange(value) {
  searchDate.value = value;
  getSortingList();
}

function init() {
  getSortingList();
}

let scanInputNumber = "";
let keyLastTime = 0;
function enterEvent(orderfillNo) {
  console.log("enterEvent orderfillNo:", orderfillNo);
  startScan(orderfillNo);
}
function keyDownEvent(event) {
  let gap = 0;
  if (keyLastTime) {
    gap = new Date().getTime() - keyLastTime;
    // 大于50毫秒，则判定为人输入
    if (gap > 50) {
      gap = 0;
      scanInputNumber = "";
    }
  }
  keyLastTime = new Date().getTime();
  if (gap < 50) {
    const theEvent = event || window.event;
    const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code !== 13 && theEvent.key.length === 1) {
      scanInputNumber += theEvent.key;
    }

    if (code === 13) {
      scanInputNumber = scanInputNumber.replace(/\D*/, "");
      enterEvent(scanInputNumber);
      scanInputNumber = "";
      keyLastTime = 0;
    }
  }
}

onMounted(() => {
  init();
  document.addEventListener("keydown", keyDownEvent);
});
onUnmounted(() => {
  document.removeEventListener("keydown", keyDownEvent);
});
</script>
<style lang="scss" scoped>
.inner {
  .ibody {
    .ib-cont {
      background-color: white;
      border-radius: 10px;
      padding: 30px;
      .btn-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        :deep(.el-date-editor) {
          width: 200px;
          height: 50px;
          color: #3f4254;
          background: #f9f9f9;
          .el-input__wrapper {
            height: 50px;
            color: #3f4254;
            background: #f9f9f9;
            .el-icon {
              font-size: 24px;
              color: #3f4254;
            }
          }
        }
      }
      :deep(.data-table) {
        font-family: 思源黑体;
        font-size: 18px !important;
        font-weight: normal;
        letter-spacing: 0em;
        color: #3f4254 !important;
        .table-header-row {
          font-family: 思源黑体;
          font-size: 18px;
          font-weight: bold;
          text-align: right;
          letter-spacing: 0em;
          color: #b5b5c3;
          border-style: dashed;
        }
        .table-normal-row {
          border-bottom: 1px dashed #d8d8d8;
          &::after {
            display: none;
          }
          &::before {
            display: none;
          }
        }
        .el-table__cell {
          border-bottom: 1px dashed #d8d8d8 !important;
        }
        .pagination {
          display: flex;
          margin-top: 20px;
          justify-content: flex-end;
        }
      }
      .scan-logo {
        margin: auto;
        margin-top: 40px;
        width: 312px;
        height: 232px;
        position: relative;
        border: 1px dashed #ddd;
        .scan-q {
          position: absolute;
          right: 10px;
          bottom: 0px;
          width: 174px;
          height: 148px;
        }
        .scan-line {
          position: absolute;
          top: 49px;
          left: 126px;
          width: 174px;
          height: 0px;
          border-bottom: 6px solid #ff7f65;
          opacity: 0;
        }
      }
    }
  }
}
:deep(.create-sort-dialog) {
  border-radius: 10px;
  .el-dialog__header {
    width: 100%;
    padding: 0px;
    height: 70px;
    line-height: 70px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
    border-bottom: 0.5px solid #d8d8d8;
    .dia-header {
      position: relative;
      height: 70px;
      line-height: 70px;
      h4 {
        font-family: 思源黑体;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        letter-spacing: 0em;
        color: #3d3d3d;
        width: 100%;
        height: 70px;
        line-height: 70px;
      }
      .el-icon {
        position: absolute;
        right: 20px;
        font-size: 32px;
        top: 20px;
      }
    }
  }
  .el-dialog__body {
    padding: 0px;
    box-sizing: border-box;
    .el-row {
      box-sizing: border-box;
      height: 80px;
      line-height: 80px;
      border-bottom: 0.5px dashed #d8d8d8;
      .label {
        text-align: right;
        font-family: 思源黑体;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0em;
        color: #b5b5c3;
        padding-right: 20px;
      }

      .btn-group {
        display: flex;
        height: 80px;
        align-items: center;
        &.btn-group-nwidth {
          .el-button {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
